<!--
 * @FilePath: StepItem.vue
 * @@author: wjj
 * @Date: 2025-07-11 15:01:09
 * @@Description: new js file
-->
<template>
  <div class="step-item">
    <div class="step-header">
      <el-icon class="drag-handle"><Rank /></el-icon>
      <el-tag :type="stepTypeTag">{{ stepTypeLabel }}</el-tag>
      <span class="step-name">{{ step.name }}</span>
    </div>

    <div v-if="hasParams" class="step-params">
      <el-descriptions size="small" :column="2" border>
        <el-descriptions-item
          v-for="(value, key) in step.params"
          :key="key"
          :label="paramLabels[key] || key"
        >
          {{ value }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="step-actions">
      <el-button type="primary" text circle @click="$emit('edit')">
        <el-icon><Edit /></el-icon>
      </el-button>
      <el-button type="danger" text circle @click="$emit('remove')">
        <el-icon><Delete /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<script lang='ts' setup name='filename'>
// import { ref, reactive, onMounted, watch, nextTick } from 'vue'
//引入用户相关的小仓库
import useUserStore from '@/store/modules/user'
import useSocketClient from '@/store/socket/socket_client'
import emmit from '@/utils/emitter'
import { useRoute, useRouter } from 'vue-router'
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
// 挂载完毕
//onMounted(()=>{})
//监控数据
//watch(select, (newVal, oldVal) => {})
import { Rank, Edit, Delete } from '@element-plus/icons-vue'
import { computed } from 'vue'

const props = defineProps({
  step: {
    type: Object,
    required: true,
  },
})

const emit = defineEmits(['edit', 'remove'])

const stepTypeMap: any = {
  browser: { label: '页面操作', tag: 'primary' },
  navigate: { label: '页面操作', tag: 'primary' },
  new_tab: { label: '页面操作', tag: 'primary' },
  input: { label: '元素操作', tag: 'success' },
  click: { label: '元素操作', tag: 'success' },
  clear: { label: '元素操作', tag: 'success' },
  checkbox: { label: '元素操作', tag: 'success' },
  select: { label: '元素操作', tag: 'success' },
  keyboard: { label: '键盘操作', tag: 'warning' },
  wait: { label: '等待操作', tag: 'info' },
}

const paramLabels: any = {
  browser: '浏览器',
  url: 'URL',
  selector: '元素选择器',
  value: '输入值',
  keys: '按键',
  duration: '等待时间(ms)',
  timeout: '超时时间(ms)',
  checked: '是否选中',
}

const stepTypeLabel = computed(() => {
  return stepTypeMap[props.step.type]?.label || '其他操作'
})

const stepTypeTag = computed(() => {
  return stepTypeMap[props.step.type]?.tag || ''
})

const hasParams = computed(() => {
  return Object.keys(props.step.params).length > 0
})
</script>
<style scope lang='scss'>
.step-item {
  position: relative;
  padding: 0.75rem; /* p-3 ≈ 12px */
  margin-bottom: 1rem; /* mb-4 ≈ 16px */
  background-color: white;
  border-radius: 0.25rem; /* rounded ≈ 4px */
  border-left-width: 4px; /* border-l-4 */
  border-left-color: #3b82f6; /* border-blue-500 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms; /* transition-all */
}

.step-item:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* hover:shadow-md */
}

.step-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem; /* mb-2 ≈ 8px */
}

.drag-handle {
  margin-right: 0.5rem; /* mr-2 ≈ 8px */
  cursor: move;
  color: #9ca3af; /* text-gray-400 */
}

.drag-handle:hover {
  color: #4b5563; /* hover:text-gray-600 */
}

.step-name {
  margin-left: 0.5rem; /* ml-2 ≈ 8px */
  font-weight: 500; /* font-medium */
}

.step-params {
  margin-top: 0.5rem; /* mt-2 ≈ 8px */
  padding-top: 0.5rem; /* pt-2 ≈ 8px */
  border-top-width: 1px; /* border-t */
  border-top-color: #f3f4f6; /* border-gray-100 */
}

.step-actions {
  position: absolute;
  top: 0.75rem; /* top-3 ≈ 12px */
  right: 0.75rem; /* right-3 ≈ 12px */
  display: flex;
  gap: 0.25rem; /* space-x-1 ≈ 4px */
}
</style>
